<script>

import hxNavbar1 from "@/components/hx-navbar1/hx-navbar.vue"

export default {
  name: "ring_reward",
  components: {hxNavbar1},
  onShow() {
    this.getRingReward({
      pageNo: this.page,
      pageSize: 10
    })
  },
  data() {
    return {
      reward_list: [],
      interval_list: [],
      hasNextPage: true,
      page: 1,
    }
  },
  onReachBottom() {
    if (this.hasNextPage) {
      this.page = this.page + 1;
      let data = {
        pageNo: this.page,
        pageSize: 10,
      }
      this.getRingReward(data)
    }
  },
  methods: {
    getRingReward(data) {
      const that = this
      for (let i = 0; i < this.interval_list.length; i++) {
        clearInterval(this.interval_list[i])
      }
      this.$api.people_reward_list(data,res=> {
        if (res.message) {
          uni.showModal({
            title: '提示',
            content: res.message,
            showCancel: false,
            confirmText: '确定'
          });
        } else if(res.data.list) {
          this.hasNextPage = res.data.total > this.page * 10;
          res.data.list.forEach((reward, index) => {
            // 抽奖时间
            let start = new Date(new Date(Number(reward.createTime)).setHours(0, 0, 0, 0))
            // 现在时间
            let now = new Date()
            // 过期时间
            let end = start.setDate(start.getDate() + 31)
            let diffDate = (end - now) / 1000
            reward.time = that.$common.time2date((diffDate))
            that.interval_list[index] = setInterval(() => {
              let diffDate_ = diffDate--
              reward.time = that.$common.time2date((diffDate_))
              if (diffDate < 0) {
                reward.time = '00:00:00';
                clearInterval(this.interval_list[index])
              }
            }, 1000);

            reward.lotteryPrizeVOS.forEach((reward_init, index) => {
                if (reward_init.status === '2') {
                  reward.show = true
                }
            })
          })
          this.reward_list = this.reward_list.concat(res.data.list);
        }
      })
    },
    getReward(id, iid) {
      uni.showLoading({
        title: '正在领取中，请稍等......'
      });
      this.$api.apply_the_reward({
        id,
        iid,
        isAll: false
      }, res => {
        uni.hideLoading();
        if (res.code === 52011) {
          uni.showModal({
            title: '提示',
            content: '用户未开户',
            showCancel: false,
            confirmText: '去认证',
            success(res) {
              if (res.confirm) {
                uni.redirectTo({
                  url: '/pages/ring/ring_redirect',
                })
              }
            },
          });
          return false
        }
        if (res.message) {
          uni.showModal({
            title: '提示',
            content: res.message,
            showCancel: false,
            confirmText: '确定'
          });
        }
        this.reward_list = []
        this.page = 1
        this.getRingReward({
          pageNo: this.page,
          pageSize: 10
        })
      })
    }
  }
}
</script>

<template>
  <view class="reward_bg">
    <hxNavbar1 title="我的奖品" barPlaceholder="hidden" :back="true" color="#000000"
               transparent="show"></hxNavbar1>
    <uni-notice-bar show-icon scrollable color="rgba(255, 255, 255, 1)" background-color="rgba(227, 43, 59, 1)"
                      text="8.88万、18.88万，58.88万和 188.88万需要线下领取，您可拨打客服电话010-67520714或第二天等待客服联系您" />
    <view v-if="reward_list.length > 0">
      <view class="reward_container" v-for="reward in reward_list">
        <view class="reward_container_title">
          <view class="reward_container_img1">
            <image src="@/static/ring/decoration_1.png"></image>
          </view>
          <view class="reward_container_text">{{reward.name}}，初始价值{{reward.totalValue | fp}}元</view>
          <view class="reward_container_img2">
            <image src="@/static/ring/decoration_2.png"></image>
          </view>
        </view>
        <view class="reward_list">
          <view class="reward_item" v-for="item in reward.lotteryPrizeVOS">
            <image class="reward_item_left" :src="item.image"></image>
            <view class="reward_item_middle">
              <view class="reward_item_middle_title">{{item.name}}</view>
              <view class="reward_item_middle_price">初始价值￥ {{item.unitPrice|fp}}</view>
              <view class="reward_item_middle_num">x{{item.quantity}}</view>
            </view>
            <view class="reward_item_right_active" v-if="item.status === '1'">已领取</view>
            <view class="reward_item_right_unactive" v-if="item.status === '2'" @click="getReward(reward.id, item.iid)">去领取</view>
          </view>
          <view class="last_time" v-if="reward.show">
            <image class="last_time_img" src="@/static/ring/time.png"></image>
            剩余领取时间：{{reward.time}}
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <view class="no_data">暂无数据</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.no_data {
  margin-top: 200rpx;
  text-align: center;
  font-size: 32rpx;
}
.reward_bg {
  background-color: #ffffff;
  min-height: 100vh;
}
.reward_container {
  padding-bottom: 50rpx;
  &_title {
    margin: 50rpx auto 10rpx auto;
    width: 560rpx;
    border-radius: 8rpx;
    border: 3rpx solid #E32B3B;
    position: relative;

    .reward_container_text {
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      height: 80rpx;
      line-height: 80rpx;
      color: #E32B3B;
      font-style: normal;
    }
    .reward_container_img1 {
      position: absolute;
      left: 2rpx;
      top: -15rpx;
      width: 62rpx;
      height: 64rpx;
      image {
        width: 62rpx;
        height: 64rpx;
      }
    }
    .reward_container_img2 {
      position: absolute;
      right: -20rpx;
      bottom: -15rpx;
      width: 74rpx;
      height: 64rpx;
      image {
        width: 74rpx;
        height: 64rpx;
      }
    }
  }
  .reward_list {
    width: 670rpx;
    margin: 0 auto;
    .reward_item {
      padding: 40rpx 0;
      display: flex;
      border-bottom: 1px solid rgba(204, 204, 204, 0.50);
      align-items: center;
      .reward_item_left {
        border-radius: 140rpx;
        width: 140rpx;
        height: 140rpx;
      }
      .reward_item_middle {
        margin-left: 25rpx;
        &_title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          margin-bottom: 10rpx;
        }
        &_price {
          width: 200rpx;
          height: 48rpx;
          background: rgba(227,43,59,0.1);
          border-radius: 8rpx;
          border: 2rpx solid #E32B3B;
          font-weight: 400;
          font-size: 24rpx;
          color: #E32B3B;
          line-height: 48rpx;
          text-align: center;
          font-style: normal;
          margin-bottom: 10rpx;
        }
        &_num {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
        }

      }
      &_right_active {
        margin-left: 70rpx;
        width: 178rpx;
        height: 64rpx;
        background: #FFFFFF;
        border-radius: 40rpx;
        border: 2rpx solid #E32B3B;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #E32B3B;
        line-height: 64rpx;
        text-align: center;
        font-style: normal;
      }
      &_right_unactive {
        margin-left: 70rpx;
        width: 178rpx;
        height: 64rpx;
        background: rgba(227, 43, 59, 1);
        border-radius: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #ffffff;
        line-height: 64rpx;
        text-align: center;
        font-style: normal;
      }
    }
    .last_time {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 18rpx;
      height: 36rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #E32B3B;
      line-height: 36rpx;
      text-align: center;
      font-style: normal;
      &_img {
        width: 32rpx;
        height: 32rpx;
        margin-right: 12rpx;
      }
    }
  }
}
</style>
